<template>
  <el-main class="maxbox">
    <!-- 下半主要内容 -->
    <div class="mainmidd">
      <!-- 输入框 -->
      <div class="inputBigbox">
        <div class="inputbox">
          <div class="inp">
            <p>设备名称：</p>
          <el-input v-model="inquire.device" placeholder="请输入"></el-input>
          </div>
          <div class="inp">
            <p>所属组织：</p>
            <el-select v-model="inquire.department" placeholder="选择所属组织">
              <el-option
                v-for="item in department"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </div>
          <div class="inp">
            <p>执行人员：</p>
            <el-select v-model="inquire.name" placeholder="选择执行人员">
              <el-option
                v-for="item in name"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </div>
          <div class="inp">
            <p>任务状态：</p>
            <el-select v-model="inquire.status" placeholder="选择任务状态">
              <el-option
                v-for="item in taskStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="btnBox">
            <el-button
              type="primary"
              plain
              icon="el-icon-search"
              @click="seacher()"
              >搜索</el-button
            >
            <el-button
              type="primary"
              plain
              icon="el-icon-refresh"
              @click="reset()"
              >重置</el-button
            >
          </div>
        </div>
        <div class="add">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="addBox()"
            v-has="'add'"
            >添加</el-button
          >
        </div>
      </div>
      <!-- 数据 -->
      <el-table
        :data="tableData"
        height="400"
        border
        style="width: calc(100% - 40px)"
      >
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="patrolName" label="巡检计划名称"></el-table-column>
        <el-table-column prop="planType" label="计划类型"></el-table-column>
        <el-table-column
          prop="department"
          label="所属部门"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="执行人员"
        ></el-table-column>
        <el-table-column
          prop="completionRate"
          label="完成率"
        ></el-table-column>
        <el-table-column prop="startTime" label="计划开始时间">
          <template slot-scope="scope">
            {{new Date(scope.row.startTime).toLocaleString()}}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="计划结束时间">
          <template slot-scope="scope">
            {{new Date(scope.row.endTime).toLocaleString()}}
          </template>
        </el-table-column>
       <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.status == null"
              class="obtncol"
              >未完成</el-button
            >
            <el-button
              v-else
              size="mini"
              :class="{
                gbtncol: scope.row.status == 2,
                obtncol:
                  scope.row.status == 0 ||
                  scope.row.status == null,
                bbtncol: scope.row.status == 1,
              }"
              >{{ status(scope.row) }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editBox(scope.row)" v-has="'edit'"
              >查看详情</el-button
            >
            <span style="color: #c1c1c1;">&emsp;|&emsp;</span>
            <el-button type="text" @click="del(scope.row)" v-has="'del'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagebox">
        <span
          >当前显示{{ nowtotal }}条/共{{ total }}条,第{{ nowpage }}页/共{{
            Math.ceil(total / aa)
          }}页</span
        >
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            prev-text="上一页"
            next-text="下一页"
            :page-sizes="counts"
            :page-size="count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="mask" v-if="isShow1"></div>
      <!-- 增加和编辑弹出框 -->
      <div class="addBox" v-if="isShow2">
          <el-header style="height: 50px;">
              <span>巡更任务详情</span>
              <i class="iconfont icon-x" @click="addDisappear" ></i>
          </el-header>
          <el-main>
              <p class="add-tip">基础信息</p>
              <div class="inp-box">
                <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>任务名称：</span>
                      </p>
                      <el-input v-model="add.patrolName" placeholder="请输入内容"></el-input>
                  </div>
                  <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>有效时间：</span>
                      </p>
                      <div class="dateBox">
                        <el-date-picker
                            v-model="add.startTime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                        <el-date-picker
                            v-model="add.endTime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                      </div>
                  </div>
              </div>
              <div class="inp-box">
                <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>执行人员：</span>
                      </p>
                      <el-select v-model="add.name" placeholder="请选择">
                        <el-option
                        v-for="item in name"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                        </el-option>
                    </el-select>
                  </div>
                  <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>计划类型：</span>
                      </p>
                      <div class="dateBox">
                        <el-select v-model="add.planType" placeholder="请选择">
                            <el-option
                            v-for="item in planType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                        <el-input v-model="add.time" placeholder="请输入内容"></el-input>
                    </div>
                  </div>
              </div>
              <div class="inp-box">
                <div class="inp">
                      <p>
                          <span class="symbol">*</span>
                          <span>完成率：</span>
                      </p>
                      <el-input v-model="add.completionRate" placeholder="请输入内容"></el-input>
                  </div>
                  <div class="inp">
                        <p>
                          <span class="symbol">*</span>
                          <span>任务状态：</span>
                      </p>
                      <el-select v-model="add.status" placeholder="请选择">
                        <el-option
                        v-for="item in taskStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                  </div>
              </div>
              <div class="inp-box">
                  <div class="inp">
                        <p>
                          <span class="symbol">*</span>
                          <span>巡更点位：</span>
                      </p>
                      <div class="dateBox">
                        <el-select v-model="add.department" placeholder="选择分区/组织">
                            <el-option
                            v-for="item in department"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                        <el-select v-model="add.planPointNo" placeholder="选择楼层">
                            <el-option
                            v-for="item in planPointNo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </div>
                  </div>
              </div>
              
              <div class="add-btn">
                  <div class="btn" @click="addDisappear">
                    <i class="iconfont icon-return"></i>
                      <span>取消</span>
                  </div>
                  <div class="btn" @click="addSave">
                    <i class="iconfont icon-save"></i>
                      <span>保存</span>
                  </div>
              </div>
          </el-main>
      </div>
    <!-- 弹出框 -->
  </el-main>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      //
      weinum: 0,
      multipleSelection: [],
      //时间
      timer: null,
      nowdata: "",
      nowtime: "",
      noontip: "",
      //处理数量
      totalnum: 0,
      tainum: 0,
      daynum: 0,
      monnum: 0,
      //输入框
      tableData: [],
      addDialog: false,
      textarea: "",
      dialogImageUrl: "",
      dialogVisible: false,
      //详情
      processingState: "",
      deviceNo: "",
      department: "",
      faultDescription: "",
      timeFailure: "",
      deviceName: "",
      safetyDir: "",
      subsystemTypes: "",
      installAddr: "",
      // 分页
      total: 0,
      count: 5,
      counts: [5,10, 20, 50, 100],
      nowpage: 1,
      aa: 10,
      nowtotal: 0,
      ids: [],
      // 添加的数据
      isShow1:false,
      isShow2:false,
      addNum:1,
      //搜索
      inquire: {
        "department": "",
        "device": "",
        "name": "",
        "status":"",
      },
      // 编辑数据
      add:{
        "completionRate": 0,
        "department": "",
        "endTime": "",
        "id": 0,
        "name": "",
        "patrolName": "",
        "planPointNo": "",
        "planType": "",
        "startTime": "",
        "status": 0,
        "time": 0
      },
      // 执行人员
      name:[
        {value: 1,label: "test01"},
        {value: 2,label: "test02"},
        {value: 3,label: "test03"}
      ],
      department:[
        {value: 1,label: "综合办公楼"},
        {value: 2,label: "产线厂房"},
        {value: 3,label: "仓储楼"}
      ],
      planType:[
        {value: 1,label: "每天"},
        {value: 2,label: "每小时"},
        {value: 3,label: "每周"}
      ],
      planPointNo:[
      {value: 1,label: "B1"},
      {value: 2,label: "B2"},
      {value: 3,label: "G1"},
      {value: 4,label: "G2"}
      ],
      taskStatus:[
        {value: 0,label: "未完成"},
        {value: 1,label: "执行中"},
        {value: 2,label: "已完成"},
        {value: 3,label: "全部"},
      ]
    };
  },
  mounted: function () {
    this.getdata();
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    //图片
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
    },
    //获取数据
    getdata: function () {
      var current = this.nowpage;
      var limit = this.count;
      axios({
        url: `patrolplans/${current}/${limit}`,
        method: "get"
      }).then(({ data }) => {
        // console.log(data.data)
        if (data.code == 200) {
          this.tableData = data.data;
          this.total = data.total;
          this.totalnum = data.total;
          this.nowtotal = data.data.length;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    handleSizeChange(val) {
      this.count = val;
      this.getdata();
    },
    //分页发生变化
    handleCurrentChange(val) {
      this.nowpage = `${val}`;
      this.getdata();
    },
    //搜索
    seacher: function () {
      var current = this.nowpage;
      var limit = this.count;
      axios({
        url: `/queryPlanByCondition/${current}/${limit}`,
        method: "post",
        data: this.inquire,
      }).then(({ data }) => {
        // console.log(data.data);
        if (data.code == 200) {
          this.tableData = data.data;
          this.total = data.total;
          this.nowtotal = data.data.length;
          this.$message.success('数据加载成功!');
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    //重置
    reset: function () {
      this.inquire={
        "department": "",
        "device": "",
        "name": "",
        "status": 0
      }
      this.getdata();
    },
    // 状态
    status(v){
      let status;
      if(v.status==0){
        status='未完成'
      }else if(v.status==1){
        status='执行中'
      }else if(v.status==2){
        status='已完成'
      }else if(v.status==3){
        status='全部'
      }
      return status;
    },
    
    clean(){
      this.add={
        "completionRate": 0,
        "department": "",
        "endTime": "",
        "id": 0,
        "name": "",
        "patrolName": "",
        "planPointNo": "",
        "planType": "",
        "startTime": "",
        "status": 0,
        "time": 0
      }
    },
    // 添加框出现
    addBox(){
      this.isShow1=true;
      this.isShow2=true;
      this.addNum=1;
    },
    // 编辑框出现
    editBox(v){
        this.isShow1=true;
        this.isShow2=true;
        this.addNum=2;
        this.add={
          "completionRate": v.completionRate,
          "endTime": v.endTime,
          "id": v.id,
          "name": v.name,
          "startTime": v.startTime,
          "status": v.status,
          "time": v.time,
          "department": v.department,
          "patrolName": v.patrolName,
          "planPointNo": v.planPointNo,
          "planType": v.planType,
        }
    },
    // 增加框消失
    addDisappear(){
        this.isShow1=false;
        this.isShow2=false;
        this.clean();
    },
    // 增加和编辑确认
    addSave(){
      if(this.addNum==1){
        this.$axios({
        url:'/addPatrolPlan',
        method:'post',
        data:this.add
        }).then((res)=>{
            // 查看搜索框内容
            console.log(res.data.msg);
            if(res.data.msg=='success'){
                this.clean();
                this.addDisappear();
                this.getdata();
                this.$message.success('添加成功!');
            }else {
              this.$message.error("添加失败！");
            }
        })
      }else{
        this.$axios({
        url:'/updatePatrolPlan',
        method:'put',
        data:this.add
        }).then((res)=>{
            // 查看搜索框内容
            console.log(res.data.msg);
            if(res.data.msg=='success'){
                this.clean();
                this.addDisappear();
                this.getdata();
                this.$message.success('编辑成功!');
            }else {
              this.$message.error("编辑失败！");
            }
        })
      }
      
    },
    // 删除
    del(v){
      this.$axios({
          url:`/deletePatrolPlan/${v.id}`,
          method:'delete'
      }).then((res)=>{
          // 查看搜索框内容
          console.log(res.data.msg);
          if(res.data.msg=='success'){
            this.getdata();
            this.$message.success('删除成功!');
          }else {
            this.$message.error("删除失败！");
          }
      })
    },
  },
};
</script>

<style lang="less" scoped>
.maxbox {
  height: 100%;
  position:relative;
}
.mainmidd {
  background-color: white;
  margin-top: 10px;
  height: calc(100% - 129px);
}
.huahua {
  display: flex;
  justify-content: space-between;
  .maintopspan {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 20%;
    padding: 10px 0;
    background-color: white;
    height: 100px;
    .maintoptop {
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        border: 1px solid rgb(230, 227, 227);
        border-radius: 2px;
        padding: 3px 20px 3px 10px;
        display: flex;
        flex-direction: cow;
        align-items: center;
        i {
          font-size: 30px;
          margin-right: 20px;
          font-weight: bold;
          color: rgb(0, 140, 255);
        }
      }
    }
  }
  .maintopspan1 {
    background-color: white;
    width: 19.5%;
    height: 100px;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    .span1colorbox {
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 80px;
      margin-left: 50px;
      margin-top: 15px;
    }
    .spanTbox {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 30px;
      .span1num {
        font-size: 30px;
        font-weight: bold;
      }
      .span1T {
        font-size: 18px;
      }
    }
  }
}
.inputBigbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .inputbox {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    width: calc(100% - 40px);
    .el-input {
      width: 250px;
    }
    .inp{
      height: 40px;
      display: flex;
      align-items: center;
    }
    .btnBox{
      width: 200px;
      display: flex;
      justify-content: space-between;
    }
  }
  .delebtn {
    margin: 10px 0 30px 20px;
  }
}

/deep/.el-table{
  margin: 0px 20px;
}
  
.pagebox {
  display: flex;
  justify-content: space-between;
  padding: 80px 10px 40px 10px;
  background: #fff;
}
// 处理状态按钮颜色
.obtncol {
  background-color: #fdebd3;
  border-color: #f59b25;
  color: black;
}
.bbtncol {
  background-color: #d8e8fa;
  border-color: #3b8fe6;
  color: black;
}
.gbtncol {
  background-color: #e2f0cd;
  border-color: #71b605;
  color: black;
}


.add{
  height: 50px;
  margin:0px 0px 20px 20px;
}

// 遮罩层
.mask{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.5);
    filter: opacity(60%);
    opacity: 60%;
    z-index: 3;
}
        
// 弹出框
.addBox{
    width: 720px;
    height: 470px;
    background: #fff;
    position:absolute;
    top: 100px;
    left: 400px;
    z-index: 4;
    .el-header{
        height: 30px;
        line-height: 30px;
        background: #f2f2f2;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-main{
        background: #fff;
        height: 430px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 50px;
        padding: 0px 20px;
        .add-tip{
            font-weight: 700;
        }
        .inp-box{
            width: 100%;
            height: 70px;
            display: flex;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            .inp{
                width: 300px;
                height: 70px;
                line-height: 35px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .symbol{
                    color: red;
                }
                .el-input{
                    width: 300px;
                    height: 30px;
                    /deep/.el-input__inner{
                        width: 300px;
                        height: 30px;
                    }
                    
                }
                .el-select{
                    /deep/.el-input--suffix{
                        width: 300px;
                        height: 30px;
                    }
                    /deep/.el-input__inner{
                        width: 300px;
                        height: 30px;
                    }
                    /deep/.el-input__icon{
                        line-height: 30px;
                    }
                }
                .dateBox{
                  width: 300px;
                  display: flex;
                  justify-content: space-between;
                  .el-select{
                    /deep/.el-input--suffix{
                        width: 140px;
                        height: 30px;
                    }
                    /deep/.el-input__inner{
                        width: 140px;
                        height: 30px;
                    }
                    /deep/.el-input__icon{
                        line-height: 30px;
                    }
                    
                  }
                  .el-input{
                    width: 140px;
                    height: 30px;
                    /deep/.el-input__inner{
                        width: 140px;
                        height: 30px;
                    }
                    
                  }
                  /deep/.el-date-editor{
                      width: 140px;
                      height: 30px;
                      line-height: 30px;
                      margin-right: 20px;
                      .el-input__icon{
                          line-height: 24px;
                      }
                      .el-range-separator{
                          line-height: 23px;
                      }
                      .el-range-separator{
                          line-height: 23px;
                      }
                      .el-input--suffix{
                          width: 140px;
                          height: 30px;
                      }
                      .el-input__inner{
                          width: 140px;
                          height: 30px;
                      }
                  }
                }
                

            }
        }
        
    }
    
}

.icon-x{
    cursor: pointer;
}
.add-btn{
    width:100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn{
        width: 80px;
        height: 35px;
        border: 1px solid #f2f2f2;
        border-radius: 3px;
        line-height: 35px;
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        margin-right: 20px;
        &:hover{
            cursor: pointer;
            color: #fff;
            background: #1890ff;
            .iconfont{
                color: #fff;
            }
        }
        .iconfont{
            color: #1890ff;
            
        }
    }
}

</style>
